<!--
 * @Author: chenyulei yulei.chen@fa-software.com
 * @Date: 2023-12-15 16:56:21
 * @LastEditors: chenyulei yulei.chen@fa-software.com
 * @LastEditTime: 2023-12-15 17:15:06
 * @FilePath: /mycim4-oms-ui/src/views/welcome/components/DemoQuery.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Query
    ref="queryDom"
    :item-config="itemConfig"
    :label-width="68"
    label-position="top"
    @change="queryChange"
    @query="doQuery"
    @clear="doClear"
  />
</template>

<script setup lang="ts">
import { type Ref, ref } from "vue";
import Query from "@/components/Query/index.vue";
import type { ItemConfig } from "@/components/Query/types";
import type { Column } from "@/components/TableSelect/types";

defineOptions({
  name: "DemoQuery"
});

interface IRow {
  processFlowId: number;
  processType: string;
  manufacyuringLayer: string;
  startBank: string;
  endBank: number;
  processOwner: string;
}

const selectTableData = ref<IRow[]>([
  {
    processFlowId: 10001,
    processType: "Test1",
    manufacyuringLayer: "Develop",
    startBank: "Man",
    endBank: 28,
    processOwner: "test abc"
  },
  {
    processFlowId: 10002,
    processType: "Test2",
    manufacyuringLayer: "Test",
    startBank: "Women",
    endBank: 22,
    processOwner: "Guangzhou"
  },
  {
    processFlowId: 10003,
    processType: "Test3",
    manufacyuringLayer: "PM",
    startBank: "Man",
    endBank: 32,
    processOwner: "Shanghai"
  },
  {
    processFlowId: 10004,
    processType: "Test4",
    manufacyuringLayer: "Designer",
    startBank: "Women",
    endBank: 24,
    processOwner: "Shanghai"
  },
  {
    processFlowId: 10005,
    processType: "Test4",
    manufacyuringLayer: "Designer",
    startBank: "Women",
    endBank: 24,
    processOwner: "Shanghai"
  },
  {
    processFlowId: 10006,
    processType: "Test4",
    manufacyuringLayer: "Designer",
    startBank: "Women",
    endBank: 24,
    processOwner: "Shanghai"
  }
]);

const columns: Column[] = [
  {
    title: "Process Flow ID",
    field: "processFlowId",
    width: 125
  },
  {
    title: "Process Type",
    field: "processType",
    width: 110
  },
  {
    title: "Manufacyuring Layer",
    field: "manufacyuringLayer",
    width: 160
  },
  {
    title: "Start Bank",
    field: "startBank",
    width: 90
  },
  {
    title: "End Bank",
    field: "endBank",
    width: 90
  },
  {
    title: "Process Owner",
    field: "processOwner",
    width: 125
  }
];

const itemConfig: Ref<ItemConfig[]> = ref([
  {
    type: "input",
    field: "name",
    label: "Name",
    defaultValue: "1",
    attr: {
      type: "text"
    }
  },
  {
    type: "select",
    field: "status",
    label: "Lot Status",
    options: [
      { value: "WAITING", label: "WAITING" },
      { value: "ACTIVE", label: "ACTIVE" },
      { value: "ONHOLD", label: "" },
      { value: "SHIPPED", label: "SHIPPED" },
      { value: "HOLDUP", label: "HOLDUP" }
    ],
    attr: {
      // multiple: true,
      // collapseTags: true,
      // collapseTagsTooltip: true,
      // maxCollapseTags: 1
    }
  },
  {
    type: "tableSelect",
    field: "id",
    label: "Lot ID",
    columns: columns,
    attr: {
      placeholder: "下拉多选",
      showKey: "processFlowId",
      data: selectTableData,
      filterKey: "startBank",
      rowFieldKey: "processFlowId"
    }
  },
  {
    type: "input",
    field: "value2",
    label: "Lot Status2"
  },
  {
    type: "input",
    field: "value3",
    label: "Lot Status3"
  },
  {
    type: "input",
    field: "value4",
    label: "Lot Status4"
  },
  {
    type: "input",
    field: "value5",
    label: "Lot Status5"
  },
  {
    type: "input",
    field: "value6",
    label: "Lot Status6"
  },
  {
    type: "input",
    field: "value7",
    label: "Lot Status7"
  },
  {
    type: "input",
    field: "value8",
    label: "Lot Status8"
  },
  {
    type: "radio",
    field: "value1",
    label: "Lot value1",
    options: [
      { value: "WAITING", label: "Waiting" },
      { value: "ACTIVE", label: "Active" }
    ]
  }
]) as Ref<ItemConfig[]>;

const doQuery = data => {
  console.log("do query...", data);
};

const doClear = (beforeClear: any, afterClear: any) => {
  console.log("do clear...", beforeClear, afterClear);
};

const queryChange = (field: string, val: any, data: any) => {
  console.log("query change...", field, val, data);
};
</script>

<style lang="scss" scoped></style>
